<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{:C('WEB_SITE_TITLE')}</title>
    <link rel="stylesheet" href="__PUBLIC__/Home/ui3/webhome/css/common.css">
    <link rel="stylesheet" href="__PUBLIC__/Home/ui3/webhome/css/play_style.css">
    <meta name="keywords" content="{:C('WEB_SITE_KEYWORD')}">
    <meta name="description" content="{:C('WEB_SITE_DESCRIPTION')}">
    <link rel="shortcut icon" href="__PUBLIC__/favicon.ico">
    <script type="text/javascript">
        if (window.applicationCache) {
            // alert("你的浏览器支持HTML5");
        } else {
            // alert("你的浏览器不支持HTML5");
            window.location.href="{:U('share/sorry')}";
        }
        {:C('GLOBAL_BDHM')}
    </script>
</head>
<body>
<div class="wh re fl">
    <div class="play_vadio js_play_vadio">
        <div class="play_video_box">
            <video loop="" id="BGtrailerVideo_pre" style="width: 100%; height: auto;" controls="none" autoplay="autoplay" muted="true">
            <source src="{:C('HOME_BG_VIDEO')}" type="video/mp4">
            Your browser does not support the video tag. </video>
        </div>
    </div>
    <div class="play_top">
        <!--导航条部分开始-->
        <div class="headerBox">
            <div class="title js_title">
                <img src="__PUBLIC__/Home/ui3/webhome/images/logo-(1).png">
                <a href="{:U('visitor/index')}">首页</a>
                <a href="{:U('search/explore')}">探索</a>
                <a href="{:U('match/index')}">赛事</a>
                <input type="text" class="JS-search" placeholder="搜索">
                <a href="{:U('download/index')}">下载</a>
                <empty name="userInfo">
                    <a href="{:U('user/login')}">登录</a>
                    <a href="{:U('user/register')}">注册</a>
                <else />
                    <a href="{:U('ucenter/index')}">个人中心</a>
                </empty>
            </div>
            <!--导航条部分结束-->
            <!--电视模型部分开始-->
            <div class="play_content">
                <div class="lookbanner_left">
                    <div id="fsD1" class="focus">  
                        <div id="D1pic1" class="fPic">  
                            <div class="fcon" style="display: none;">
                                <a href="{:U('match/races')}/27">
                                    <img src="__PUBLIC__/Home/ui3/webhome/images/ti_dota2.jpg">
                                </a>
                            </div>
                            <div class="fcon" style="display: none;"><img src="__PUBLIC__/Home/ui3/webhome/images/tupian2.jpg"></div>
                            <!-- <div class="fcon" style="display: none;"><img src="__PUBLIC__/Home/ui3/webhome/images/tupian3.jpg"></div> -->
                        </div>
                        <div class="fbg">  
                            <div class="D1fBt" id="D1fBt">  
                                <a href="javascript:void(0)" hidefocus="true" target="_self"><i></i></a>
                                <a href="javascript:void(0)" hidefocus="true" target="_self"><i></i></a>
                                <a href="javascript:void(0)" hidefocus="true" target="_self"><i></i></a>
                            </div>  
                        </div>  
                        <span class="prev"></span>
                        <span class="next"></span>
                    </div>  
                </div>
            </div>
            <!--电视下面两个部分-->
            <div class="transcribe">
                <div class="luzhi">
                    <div><img src="__PUBLIC__/Home/ui3/webhome/images/luzhi_img_03.png"></div>
                    <div>
                        <span class="luzhi_text"></span>
                        <span class="textt wrap">最轻量录制工具，炫酷操作，一键记录，打造专属你的游戏藏宝室，轻松分享精彩瞬间，暴走五杀不再是截图！</span>
                    </div>
                    <a target="_blank" href="{:U('Home/Download/pc')}" class="mt5 luzhi_but luzhiBut">录制工具下载</a>
                </div>
                <div class="luzhi">
                    <div><img src="__PUBLIC__/Home/ui3/webhome/images/app_img_03.png"></div>
                    <div>
                        <span class="luzhi_text"></span>
                        <span class="textt wrap">微视频，随时随地想看就看。片段式直播，看完整场比赛只要五分钟。游戏社区，与小伙伴分享游戏中的喜怒哀乐！</span>
                    </div>
                    <a href="javascript:void(0);" class="luzhi_but appBut" onclick="downloadplay();">APP下载</a>
                </div>
            </div>
        </div>
        <div class="wh fl indexBannerBG pb20">
            <div class="wh_mar">
                <div class="show_img JS-banner" style="display: none;">
                    <a href="" target="_blank">
                        <img src="" />
                    </a>
                </div>
                <div class="wh over">
                    <div class="jcsp">
                        <div class="jscp_n">
                            <div class="bd">
                                <div class="header">
                                    <div>
                                        <img class="jcsp1" src="__PUBLIC__/Home/ui3/webhome/images/jcsp1.png"/><span class="jc" >热门比赛</span>
                                    </div>
                                    <div>
                                        <a class="ck" href="{:U('match/index')}">查看更多 <b>></b><b>></b> </a>
                                    </div>
                                </div>
                                <ul class="jcsp-list bg">
                                    <volist name="hotRace" id="race">
                                        <li class="js_videoList">
                                            <div class="wraper">
                                                <img class="img" src="{$race['cover'] ? $race['cover'] : $race['match']['cover']}"/>
                                            </div>
                                            <a href="{:U('share/match', ['id' => $race['races'][0]])}" class="videoLink"></a>
                                            <ul class="jcsp01" style="padding:0px">
                                                <li class="qgw">
                                                    <img class="we" src="{$race['team'][0]['logo']}"/>
                                                    <p clas="we1">{$race['team'][0]['name']}</p>
                                                </li>
                                                <li class="score_num">
                                                    <div class="wh fl">
                                                        <span class="numBox">
                                                            <span class="numBg numL"></span>
                                                            <span class="num">{$race['score'][0]}</span>
                                                            <span class="numBg numR"></span>
                                                        </span>
                                                        <span class="txt">:</span>
                                                        <span class="numBox">
                                                            <span class="numBg numL"></span>
                                                            <span class="num">{$race['score'][1]}</span>
                                                            <span class="numBg numR"></span>
                                                        </span>
                                                    </div>
                                                    <div class="wh fl listNum mt10">
                                                        <foreach name="race.races" item="vo" key="k">
                                                            <a href="{:U('share/match', array('id' => $vo))}">{$k+1}</a>
                                                        </foreach>
                                                    </div>
                                                </li>
                                                <li class="qgw">
                                                    <img class="we" src="{$race['team'][1]['logo']}"/>
                                                    <p clas="we1">{$race['team'][1]['name']}</p>
                                                </li>
                                            </ul>
                                        </li>
                                    </volist>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="jcsp">
                        <div class="jscp_n">
                            <div class="bd">
                                <div class="header">
                                    <div>
                                        <img class="jcsp1" src="__PUBLIC__/Home/ui3/webhome/images/jcsp2.png"/><span class="jc">精彩视频</span>
                                    </div>
                                    <div>
                                        <a class="ck" href="{:U('search/explore')}">查看更多 <b>></b><b>></b> </a>
                                    </div>
                                </div>
                                <ul class="jcsp-list">
                                    <volist name="hotVideo" id="video">
                                        <li class="js_videoList">
                                            <div class="wraper">
                                                <video muted loop="loop" src="{$video.pre_uri}"></video>
                                            </div>
                                            <a href="{:U('share/video', ['id' => $video['id']])}" class="videoLink"></a>
                                            <ul class="hywj">
                                                <li class="videoText">{$video.title}</li>
                                                <li>
                                                    <a href="{:U('others/index', ['uid' => $video['user']['id']])}" target="_blank" class="lf rm">
                                                        <img src="__PUBLIC__/Home/ui3/webhome/images/user.png"/>
                                                        {$video.user.nickname}
                                                    </a>
                                                    <span class="rt rm"><img src="__PUBLIC__/Home/ui3/webhome/images/bof.png"/>播放{$video.statis.play}</span>
                                                </li>
                                            </ul>
                                        </li>
                                    </volist>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="jcsp">
                        <div class="jscp_n">
                            <div class="bd">
                                <div class="header">
                                    <div>
                                        <img class="jcsp1" src="__PUBLIC__/Home/ui3/webhome/images/jcsp2.png"/><span class="jc" >活跃玩家</span>
                                    </div>
                                    <div>
                                        <a class="ck" href="{:U('search/user')}">查看更多 <b>></b><b>></b> </a>
                                    </div>
                                </div>
                                <ul class="jcsp-list" data-bind="foreach:activeUser">
                                    <li>
                                        <div>
                                            <div class="wraper">
                                                <img src="" data-bind="attr:{'src':bg}" class="img">
                                                <a class="yh" href="" data-bind="attr:{'href':link}">
                                                    <!-- ko if:hasAuth -->
                                                    <img class="icon" src="" alt="" data-bind="attr:{'src':auth.pic, 'alt':auth.name}"/>
                                                    <!-- /ko -->
                                                    <img class="yh1 circle" src="" data-bind="attr:{'src':avatar}"/>
                                                </a>
                                            </div>
                                            <ul class="hywj">
                                                <li class="userName">
                                                    <span>
                                                        <!-- ko if:gender=="男" -->
                                                            <img src="__PUBLIC__/Home/ui3/webhome/images/sex.png"/>
                                                        <!-- /ko -->
                                                        <!-- ko if:gender=="女" -->
                                                            <img src="__PUBLIC__/Home/ui3/webhome/images/girl.png"/>
                                                        <!-- /ko -->
                                                        <!-- ko text:nickname --><!-- /ko -->
                                                    </span>
                                                </li>
                                                <li>
                                                    <a class="gz" href="javascript:;" data-bind="click:follow,text:is_follow()?'已关注':'关注'"></a>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--轻量录制。一件编辑。保存游戏足迹部分开始-->
        <div class="redact">
            <p class="text">轻量录制 · 一键编辑 · 保存游戏足迹</p>
            <div class="imag">
                <img src="__PUBLIC__/Home/ui3/webhome/images/day_and_day1_03.png" class="img1">
                <img src="__PUBLIC__/Home/ui3/webhome/images/day_and_day_03.png" class="img2">
            </div>
        </div>

        <!--力争成为最好的玩家，不顾虑其他的事情-->

        <div class="good">
            <p>力争成为最好的玩家，不顾虑其他的事情</p>
            <div class="goodB">
                <a href="{:U('user/login')}" class="a1">加入</a>
                <a href="{:U('search/explore')}" class="a2">探索</a>
            </div>
        </div>

        <!--footer部分开始-->
        <div class="footer pb30">
            <div class="top">
                <p class="title1">合作伙伴</p>
                <div id="div1" class="div1">
                    <ul>
                        <volist name="partners" id="partner">
                        <li>
                            <a target="_blank" href="{$partner.link}" alt="{$partner.name}">
                                <img src="{$partner.logo}" />
                            </a>
                        </li>
                        </volist>
                    </ul>
                </div>
            </div>

            <div class="foot">
                <ul>
                    <li class="tit">友情链接</li>
                    <volist name="links" id="l">
                        <li><a href="{$l.url}" target="_blank">{$l.name}</a></li>
                    </volist>
                </ul>
                <ul>
                    <li class="tit">录制帮助</li>
                    <li><a target="_blank" href="{:U('download/index')}">录制工具下载</a></li>
                    <li><a target="_blank" href="{:U('download/tutorial')}">使用教程</a></li>
                    <li><a target="_blank" href="{:U('faq/index')}">常见问题</a></li>
                    <li><a target="_blank" href="{:U('Feedback/pc')}">意见反馈</a></li>
                    <!-- <li><a href="">服务条款</a></li> -->
                </ul>
                <span class="line"></span>
                <ul>
                    <li class="tit1"><img src="__PUBLIC__/Home/ui3/webhome/images/iphone_07.png">IOS/Android下载</li>
                    <li><img src="__PUBLIC__/Home/ui3/webhome/images/download_07.png" class="downlowad"></li>
                </ul>
                <ul style="margin-top: 80px">
                    <li class="tit1">官方交流群：480306289</li>
                    <li>
                        <a target="_blank" class="circle" href="http://weibo.com/p/1006065640304166/home?from=page_100606&mod=TAB&is_all=1#1464945059024">
                            <img src="__PUBLIC__/Home/ui3/webhome/images/xinlang_10.png">
                        </a>
                        <a target="_blank" class="circle" href="http://shang.qq.com/wpa/qunwpa?idkey=9e71bff258e031134ae1e311bb6763a1308d8ebc3db2d63935e5d83933851a3c" style="margin-left: 20px">
                            <img src="__PUBLIC__/Home/ui3/webhome/images/QQ_10.png">
                        </a>
                    </li>
                </ul>
            </div>
            <p class="last_line"></p>
            <div class="footer_last">
                <p>&copy;2013 ALL RIghts Reserved.版权所有.成都映霸龙渊文化传播有限公司 蜀ICP备16004268号</p>
                <p>联系电话：028-86734773 &nbsp; 公司地址：成都高新区益州大道中段722号复城国际T1栋12楼</p>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="__PUBLIC__/Home/ui3/js/lib/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/Home/ui3/js/lib/knockout-2.3.0.js"></script>
<script type="text/javascript" src="__PUBLIC__/Home/ui3/js/common.js"></script>
<script type="text/javascript" src="__PUBLIC__/Home/ui3/webhome/js/jquery_public.js?v=1.0"></script>
<script type="text/javascript" src="__PUBLIC__/Home/ui3/webhome/js/koala.min.1.5.js"></script>
<include file="common/var" />
<script type="text/javascript">
    Qfast.add('widgets', { path: "__PUBLIC__/Home/ui3/webhome/js/terminator2.2.min.js", type: "js", requires: ['fx'] });
    Qfast(false, 'widgets', function () {
        K.tabs({
            id: 'fsD1',   //焦点图包裹id
            conId: "D1pic1",  //** 大图域包裹id
            tabId:"D1fBt",
            tabTn:"a",
            conCn: '.fcon', //** 大图域配置class
            auto: 1,   //自动播放 1或0
            effect: 'fade',   //效果配置
            eType: 'click', //** 鼠标事件
            pageBt:true,//是否有按钮切换页码
            bns: ['.prev', '.next'],//** 前后按钮配置class
            interval: 3000  //** 停顿时间
        })
    })
    $(function(){
        $(".js_videoList").each(function(i) {
            $(this).hover(function(){
                $(this).find("video").trigger('play');
            },function(){
                $(this).find("video").trigger('pause');
            });
        });
        $(".JS-search").keydown(function (e){
            if(e.which == "13"){
                var str = $('.JS-search').val();
                if (str.length > 0) {
                    location.href = "{:U('Home/search/video')}?keywords="+str;
                }
            }
        });

        window.viewModel = {
            activeUser : ko.observableArray([])
        }
        ko.applyBindings(viewModel);

        var bannerUrl = "/api/a_d/{$adCode}";
        if ($('.JS-banner').length) {
            $.get(bannerUrl, function(data) {
                if (data.code == 200 && data.data.count > 0) {
                    var ad = data.data.lists[0];
                    $('.JS-banner').find('a').attr('href', ad.link);
                    $('.JS-banner').find('img').attr('src', ad.image);
                    $('.JS-banner').fadeIn();
                }
            });
        }
        $.get("{:U('api/top/user')}", function(data){
            if (data.code == 200) {
                var list = data.data.lists.slice(0, 4);
                viewModel.activeUser(getUsers(list));
            }
        });
    });
    function getUsers(data) {
        var list = [];
        $.each(data, function(index, el) {
            var i = parseInt(Math.random()*_THIS.bgList.length);
            var user = {
                id : el.id,
                bg : el.background ? el.background : _THIS.bgList[i],
                avatar : el.avatar ? el.avatar : "__PUBLIC__/Home/ui3/images/avatar-mr.png",
                gender : el.gender,
                nickname : el.nickname,
                link : "{:U('others/index')}" + '?uid=' + el.id,
                is_follow : ko.observable(el.is_follow && el.is_follow > 0),
                pending : false,
                hasAuth : el.auth && el.auth.pic,
                auth : {},
                follow : function(obj, e) {
                    if (obj.pending) {
                        return;
                    }
                    obj.pending = true;
                    var url = obj.is_follow() ? "{:U('follow/unfollow')}" : "{:U('follow/dofollow')}";
                    $.post(url, {uid: obj.id}, function(data, textStatus, xhr) {
                        if (data.status == 0) {
                            location.href == "{:U('user/login')}";
                            return;
                        }
                        if (data.state == 0) {
                            obj.is_follow(!obj.is_follow());
                        }
                        obj.pending = false;
                    });
                }
            };
            if (user.hasAuth) {
                user.auth.pic = el.auth.pic;
                user.auth.name = el.auth.name;
            }
            list.push(user);
        });
        return list;
    }
    window._THIS = {
        qrcodeImgUrl:"__PUBLIC__/Home/ui3/webhome/images/weixinma.jpg",
        bgList : [
            '__PUBLIC__/Home/ui3/images/user_bg_1.jpg',
            '__PUBLIC__/Home/ui3/images/user_bg_2.jpg',
            '__PUBLIC__/Home/ui3/images/user_bg_3.jpg',
            '__PUBLIC__/Home/ui3/images/user_bg_4.jpg',
            '__PUBLIC__/Home/ui3/images/user_bg_5.jpg',
        ],
    }
</script>
  <!--下载弹窗S-->

    <div id="downPopup">
    </div>
    <div class="popbg" onclick="hid()"></div>
    <!--下载弹窗E-->
</body>
</html>